<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>生命周期钩子函数</h1>
        <p>{{age}}</p>
        <input type="text" v-model="age">
        <p>v-model绑定输入框，有两种情况，设置输入框的选中状态，获取输入框的值</p>
        <p>性别</p>
        <label for="sex">男</label>
        <input name="sex" type="radio" value="male" v-model="val1">
        <label for="sex">女</label>
        <input name="sex" type="radio" value="female" v-model="val1">
        <label for="sex">保密</label>
        <input name="sex" type="radio" value="secret" v-model="val1">
        <p>你的性别是：{{val1}}</p>
        <p>你的爱好</p>
        <label>唱</label>
        <input type="checkbox" name="hobby" value="sing" v-model='val2'>
        <br>
        <label>跳</label>
        <input type="checkbox" name="hobby" value="dance" v-model='val2'>
        <br>
        <label>rap</label>
        <input type="checkbox" name="hobby" value="rap" v-model='val2'>
        <br>
        <label>打篮球</label>
        <input type="checkbox" name="hobby" value="basketball" v-model='val2'>
        <p>你的爱好是：{{val2}}</p>
        <p>你的家乡</p>
        <select name="" id="" v-model="val3">
            <option value="长沙">长沙</option>
            <option value="株洲">株洲</option>
            <option value="湘潭">湘潭</option>
            <option value="常德">常德</option>
            <option value="永州">永州</option>
        </select>
        <p>你的家乡是：{{val3}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                age: 18,
                val1: 'secret',
                val2: [],
                val3: ''
            },
            beforeCreate() {
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeCreate--1');
            },
            created() {
                console.log(this.$data);
                console.log(this.$el);
                console.log('created--2');
                this.getData();
            },
            beforeMount() {
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeMount--3');
            },
            mounted() {
                console.log(this.$data);
                console.log(this.$el);
                console.log('mounted--4');
            },
            beforeUpdate() {
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeUpdate--5');
            },
            updated() {
                console.log(this.$data);
                console.log(this.$el);
                console.log('updated--1');
            },
            beforeDestroy() {
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeDestroy--1');
            },
            destroyed() {
                console.log(this.$data);
                console.log(this.$el);
                console.log('destroyed--1');
            },
            methods: {
                getData() {
                    console.log('我获取了数据');
                }
            }
        });
    </script>
</body>

</html>